﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Map.aspx.cs" Inherits="HNQXYJ.GPRS.Map" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=ddb44554222452c6769bfa32a8793107&v=1.1&services=true"></script>

    <link href="../CSS/Map.css" rel="stylesheet" type="text/css" />
    <link href="../CSS/MapPop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        $(function () {
            createMap(114.400085, 30.51953); //114.520932,38.048958  114.400085, 30.51953
            setMapEvent();
            addMapControl();
            // $("#cityList").hide();
            //显示城市列表
            $("#list").click(function (e) {
                $("#cityList").css("top", "34px").css("left", "2px").show();
            });
            //关闭城市列表
            $("#closeCityList").click(function () {
                $("#cityList").hide();
            });

            //数据存储 数组
            var array = [['18703642841', '湖北气象局', '吴洋', '15637161981', '在线', '114.400085', '30.51953', '../images/green.png', '终端1'], ['18703642941', '湖北气象局', '吴洋', '15637161981', '离线', '114.400754', '30.519568', '../images/red.png', '终端2'], ['18703642951', '湖北气象局', '王建业', '15637161981', '离线', '114.400451', '30.519577', '../images/redp.gif', '终端3']];
            window.array = array;
            for (var i = 0; i < array.length; i++) {
                var lng = array[i][5];
                var lat = array[i][6];
                var points = new BMap.Point(lng, lat);
                addMarker(points, i);

            }

            //点击对应终端移动地图
            $("a[lng]").each(function () {
                $(this).click(function () {
                    var lng = $(this).attr("lng");
                    var lat = $(this).attr("lat");
                    map.panTo(new BMap.Point(lng, lat));
                });

            });

            //GPRS信息发送事件
            $("#send").click(function () {
                var msg = $("#sendMsg").val();
                if (msg == "" || msg.lenght < 3 || msg.length > 350) {
                    alert("发送信息不能为空或者长度不符合要求！");
                    return;
                }
                else {
                    alert("信息已发出");
                }

            });


        });

        //创建地图函数
        function createMap(lng, lat) {
            var map = new BMap.Map("dituContent"); //在页面容器中创建一个地图
            var point = new BMap.Point(lng, lat); //定义一个中心点的坐标
            map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map; //将map设为全局变量
            // addMarker(point, 1);

        }

        //地图事件设置函数
        function setMapEvent() {
            map.enableDragging(); // 启用地图拖拽事件
            map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
            map.enableDoubleClickZoom(); //启用地图双击放大事件
            map.enableKeyboard(); //启用键盘上下左右键移动地图
        }

        //地图控件添加函数：
        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl();
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl();
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl();
            map.addControl(ctrl_sca);
        }

        // 编写自定义函数,创建标注http://dev.baidu.com/wiki/static/map/API/examples/images/ico-1-9.png
        function addMarker(point, index) {

            var myIcon = new BMap.Icon(array[index][7], new BMap.Size(30, 36), 
                                {
                              offset: new BMap.Size(15, 36) ,//标注的偏移，让标注点的下端指向经纬度坐标
                              infoWindowOffset: new BMap.Size(15, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                          }
             );

            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);

            //给标注添加鼠标滑过事件
            marker.addEventListener("mouseover", function () {
                //alert(mapDataArray[0]);
                var infoWindow = new BMap.InfoWindow();
                var detailInfow = '<div>终端号码：' + array[index][0] + '<br/>所属单位：' + array[index][1] +'<br/>气象信息员：'+array[index][2]+'<br/>联系电话：'+array[index][3]+'<br/>在线状态：'+array[index][4]+ '</div>'
                infoWindow.setContent(detailInfow);
                this.openInfoWindow(infoWindow, map.getCenter());
            });

            //给标注添加鼠标点击事件
            marker.addEventListener("click", function () {
                // 弹出遮罩层的信息发送框
                var villageName = array[index][8];
                $("#villageName").val(villageName);
                ShowDiv('MyDiv', 'fade');
            });
        }

        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            // bgdiv.style.height = $(document).height();
            $("#" + bg_div).height($(document).height());
        };
        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                        <td class="rtbg">
                            <span id="list" style=" cursor:pointer;">湖北省
                                
                                <img alt=""  src="../images/icon1.gif" align="absmiddle" /></span><img src="../images/icon2.gif"
                                    align="absmiddle" />终端在线<img src="../images/icon3.gif" align="absmiddle" />终端离线&nbsp;<img src="../images/icon6.gif" align="absmiddle" />LED在线&nbsp;&nbsp; 
                                <img src="../images/icon7.gif" align="absmiddle" />LED离线&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div id="dituContent" style=" width:100%; height:580px;" >
                             
                           </div>
                        </td>
                    </tr>
                </table>
<div id="cityList" style=" display:none; position:absolute; z-index:100;" >
        <table width="400" height="200" border="0" cellspacing="0" cellpadding="0" class="borbg">
            <tr>
                <td class="cslist" height="27">
                    <span>武汉市</span><img id="closeCityList" src="../images/icon5.gif" align="absmiddle">
                </td>
            </tr>
            <tr>
                <td height="27" class="lb_mc">
                    <a href="#" lng="114.400085" lat="30.51953">省气象局</a>
                </td>
            </tr>
            <tr>
                <td class="lb_mc" valign="top">
                   <a href="#" lng="114.400085" lat="30.51953" > 终端 1</a> ，<a href="#" lng="114.400754" lat="30.519568" > 终端 2</a>,<a href="#" lng="114.400451" lat="30.519577" > 终端 3</a>
                </td>
            </tr>
        </table>
  </div>

 <div id="fade" class="black_overlay">
 </div>
 <div id="MyDiv" class="white_content" >
  <%--      <div style="text-align: right; cursor: default; height: 40px;">
           <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>--%>
         <table width="448" border="0" cellspacing="0" cellpadding="0" align="center" class="bg" >
            <tr>
                <td height="40" class="tpt">
                    <img src="../images/tpt.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="25" align="center">
                    <img src="../images/tline.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    村名：<input name="村名" id="villageName" type="text" class="bor" style="width: 335px;" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送内容：<span style="font-size: 12px; color: #FF0000">（字数不超过350个)</span><br>
                    <%--<textarea  id="sendMsg" name="textarea" rows="" cols="" class="bor2" ></textarea>--%>
                    <asp:TextBox ID="sendMsg" runat="server" class="bor2" TextMode="MultiLine" MaxLength="350"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送次数：<%--<input id="sendTimes" name="sendTimes" type="text" size="3" class="bor" />--%>
                    <asp:TextBox ID="sendTimes" runat="server" size="3" class="bor" Text="1"></asp:TextBox>
                    次
                </td>
            </tr>
            <tr>
                <td height="60" align="center">
                    <img src="../images/tqx.gif" alt="" onclick="CloseDiv('MyDiv','fade')" />&nbsp;&nbsp;&nbsp;&nbsp;<img id="send" src="../images/tfs.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="20">
                </td>
            </tr>
        </table>
       <input type="hidden" id="phoneHidden" />
        
 </div>
    </form>
</body>
</html>
